<template>
  <div class='operation-wrapper'>
    <div class="list controls-list">
      <custom-title title="操作列表"/>
      <base-table :tableModel="operateList" :tableItemConfig="operateListConfig" stripe height="250" v-loading="operateLoading"> 
        <template v-slot:operateType="{scope,item}">
          <dict-tag :options="dict.type.operate_type" :value="scope.row[item.prop]" />         
        </template>
        <template v-slot:operateStatus="{scope,item}">
          <dict-tag :options="dict.type.operate_status" :value="scope.row[item.prop]" />         
        </template>
      </base-table>
    </div>
    <div class="list readtype-list">
      <custom-title title="阅读状态"/>
      <base-table :tableModel="readtypeList" :tableItemConfig="readtypeListConfig" stripe height="250" v-loading="readtypeLoading">
        <template v-slot:readStatus="{scope,item}">
          <dict-tag :options="dict.type.read_status" :value="scope.row[item.prop]" />         
        </template>
      </base-table>
      <!-- <Pagination/> -->
    </div>
  </div>
</template>

<script>
import { listAlarmOperate,listAlarmMessage } from '@/api'
export default {
  dicts: ['operate_type','operate_status','read_status'],
  props: {
    value: {
      require: true
    }
  },
  data() {
    return {
      // 操作列表
      operateList: [],
      operateListConfig: [        
        {
          prop: 'operateType',
          label: '操作类型',
          slotName: 'operateType'
        },
        {
          prop: 'createTime',
          label: '操作时间'
        },
        {
          prop: 'operateContent',
          label: '操作内容'
        },
        {
          prop: 'operateName',
          label: '操作人员'
        },
        {
          prop: 'operateStatus',
          label: '操作状态',
          slotName: 'operateStatus'
        }
      ],
      operateLoading: false,
      // 阅读状态列表
      readtypeList: [],
      readtypeListConfig: [
        {
          prop: 'readStatus',
          label: '状态',
          slotName: 'readStatus'
        },
        {
          prop: 'createTime',
          label: '创建时间'
        },
        {
          prop: 'readTime',
          label: '阅读时间'
        },
        {
          prop: 'receviedAccount',
          label: '人员账号'
        },
        {
          prop: 'receviedName',
          label: '人员姓名'
        }],
      readtypeLoading: false
    };
  },
  computed: {},
  watch: {
    value: {
      handler(newVal) {
        this.getList(newVal)
      },
      immediate: true
    }
  },
  methods: {
    async getList(data) {
      const params = {
        alarmId: data.alarmId
      }
      this.operateLoading = true
      this.readtypeLoading = true
      const alarmOperate = await listAlarmOperate(params)
      const alarmMessage = await listAlarmMessage(params)
      this.initAlarmOperateList(alarmOperate)
      this.initAlarmMessage(alarmMessage)
    },
    initAlarmOperateList(operate) {
      this.operateList = operate.rows
      this.operateLoading = false
    },
    initAlarmMessage(message) {
      this.readtypeList = message.rows
      this.readtypeLoading = false
    },

  },
  components: {},
}
</script>